<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<f:view>
	<head>
<f:loadBundle basename="messages" var="msgs" />
<title>Teamer</title>

<link
	href="${facesContext.externalContext.requestContextPath}/views/css/home.css"
	media="screen" rel="stylesheet" type="text/css" />


<link
	href="${facesContext.externalContext.requestContextPath}/views/css/home1.css"
	media="screen" rel="stylesheet" type="text/css" />
<!-- 	
	<link
		href="${facesContext.externalContext.requestContextPath}/views/css/home2.css"
		media="screen" rel="stylesheet" type="text/css" />

	<link
		href="${facesContext.externalContext.requestContextPath}/views/css/home3.css"
		media="screen" rel="stylesheet" type="text/css" />
	 -->
<link href='http://fonts.googleapis.com/css?family=Oswald'
	rel='stylesheet' type='text/css' />

<script type="text/javascript"
	src="${facesContext.externalContext.requestContextPath}/views/scripts/jquery.js"></script>
<script type="text/javascript">
	jQuery.noConflict();
</script>
<script type="text/javascript">
	jQuery(document).ready(
			function() {
				var text = [ "1.5 Million Members", "80,000 Teams",
						"Over 200 Sports" ];
				var counter = 0;
				var elem = document.getElementById("changeText");
				setInterval(change, 2500);
				function change() {
					elem.innerHTML = text[counter];
					counter++;
					if (counter >= text.length) {
						counter = 0;
					}
				}

			})
</script>
	</head>
	<body>
		<h:form id="loginForm" prependId="false">
			<ui:include src="header.xhtml" />
			<br />
			<!-- Begin Teamer MainBody	-->
			<div class="TMBMainBody">

				<h1>Take the hassle out of organising your team</h1>
				<h2>Teamer is a private organisational and social platform for
					your team</h2>

				<div class="container_12">

					<div class="grid_12 ">
						<div class="fleft">
							<img
								src="${facesContext.externalContext.requestContextPath}/views/images/coach_animated.gif" />
						</div>
						<div class="fright">
							<img
								src="${facesContext.externalContext.requestContextPath}/views/images/teamer_homepage_graphic.png" />
						</div>
					</div>

					<div class="grid_3 ">
						<h3>Whatever your sport</h3>
						80,000 teams around the world use Teamer to get organised.
					</div>

					<div class="grid_3 ">
						<h3>Members of all ages</h3>
						Our private and secure teampages are great for adult and kids
						teams.
					</div>

					<div class="grid_3">
						<h3>Communicate Simply</h3>
						Use email, free sms and mobile apps to notify members of team
						events.
					</div>

					<div class="grid_3">
						<h3>Join the community</h3>
						1.5 million teammates interact on Teamer. Get started today.
					</div>

				</div>

				<div class="clr"></div>
				<a class="bigGreenButton" href="/users/new"
					title="Sign Up with Teamer.">Sign up, It's FREE!</a>

				<div id="changeText">1.5 Million Members</div>

			</div>
			<!-- End Teamer MainBody	-->

			<!-- Begin Teamer Features' Icons	-->
			<script>
				jQuery(document).ready(
						function() {
						});
			</script>

			<div id="FeaturesWrap">
				Click on a feature to scroll to it
				<div id="Features">
					<nav style="width: 975px;"> 
						<a href="#first"
						id="first_feature" onclick="goToByScroll('AreaMembers')"
						class="FeatureIcon FeatureIconOne">
						<div>Members</div></a>
					
					<div id="nav_left_margin" style="margin: -80px 0 0 120px;">
						<div style="width: 20%; float: left;">
							<a style="float: right;" href="#second"
								onclick="goToByScroll('AreaEvents')"
								class="FeatureIcon FeatureIconTwo"><div>Events</div></a>
						</div>

						<div style="width: 20%; float: left;">
							<a style="float: right;" href="#third"
								onclick="goToByScroll('AreaAvailability')"
								class="FeatureIcon FeatureIconSix"><div>Availability</div></a>
						</div>


						<div style="width: 20%; float: left;">
							<a style="float: right;" href="#fourth"
								onclick="goToByScroll('AreaDocs')"
								class="FeatureIcon FeatureIconFour"><div>Docs</div></a>
						</div>

						<div style="width: 20%; float: left;">
							<a style="float: right;" href="#fifth"
								onclick="goToByScroll('AreaPhotos')"
								class="FeatureIcon FeatureIconFive"><div>Photos</div></a>
						</div>
						<div style="width: 20%; float: left;">
							<a style="float: right;" href="#sixth"
								onclick="goToByScroll('AreaApps')"
								class="FeatureIcon FeatureIconThree"><div>Apps</div></a>
						</div>
					</div>
					</nav>
				</div>
			</div>
			<!-- End Teamer Features' Icons	-->



			<ui:include src="footer.xhtml" />
		</h:form>


	</body>
</f:view>
</html>
